<template>
  <a-steps :current="currentID" size="small" v-if="setupData && setupData.length">
    <a-step
      v-for="item in setupData"
      :key="item.projectState"
      :class="item.projectState === 0 ? 'description-box' : ''"
    >
      <template #description>
        <div class="description-f">
          <div class="description">
            <div
              class="description-color"
              :style="item.projectState === currentID ? '' : 'color: rgba(51, 51, 51, 1);'"
              style="
                font-size: 16px;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 800;
              "
              >{{ item.projectStateName }}</div
            >
            <p style="color: #999999">{{
              item.projectState === 0 ? item.createTime : item.state
            }}</p>
          </div>
        </div>
      </template>
    </a-step>
  </a-steps>
  <div v-else>
    <Empty />
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, watch, PropType } from 'vue';
  import { Empty, Steps } from 'ant-design-vue';
  import { useDrawer } from '/@/components/Drawer';
  interface Step {
    createTime: string;
    endTime: string;
    projectState: number;
    projectStateName: string;
    state: string;
  }
  export default defineComponent({
    name: 'StepBar',
    components: {
      Empty,
      [Steps.name]: Steps,
      [Steps.Step.name]: Steps.Step,
    },
    props: {
      data: {
        type: Array as PropType<Step[]>,
        default: () => [],
      },
    },
    setup(props) {
      const [registerDrawer, { openDrawer }] = useDrawer();
      const setupData = ref<Step[]>(props.data || []);
      const currentID = ref<number>(
        props.data.find((e) => e.state === '正在进行时')?.projectState || 0,
      );

      watch(
        () => props.data,
        (newVal) => {
          if (newVal && newVal.length) {
            setupData.value = newVal;
            currentID.value = newVal.find((e) => e.state === '正在进行时')?.projectState || 0;
          }
        },
      );

      function handleCreate(record: Recordable = {}) {
        openDrawer(true, {
          record,
          isUpdate: false,
        });
      }
      return { handleCreate, registerDrawer, currentID, setupData };
    },
  });
</script>
<style lang="less" scoped>
  .description-color {
    // color: @header-dark-bg-hover-color; // 顶栏主题
    color: @primary-color;
  }

  :deep(.ant-steps-icon) {
    font-size: 14px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    align-items: center;
    top: 0px;
  }

  :deep(.ant-steps-item-container) {
    cursor: auto !important;
  }

  :deep(.description-box .ant-steps-item-icon) {
    margin-left: 3.2rem;
  }

  :deep(.ant-steps-item-icon) {
    margin-left: 0.8rem;
    margin-right: 0.7rem;
  }

  :deep(.description) {
    width: 17rem;
    height: 4rem;
    margin-top: 2rem;
    margin-left: -9.9rem;
    text-align: center;
    overflow: hidden;
  }
</style>
